<template>
  <div class="time-display" @click="handleClick">
    <span class="date-part">{{ datePart }}</span>
    <span class="time-separator"></span>
    <span class="time-part">{{ timePart }}</span>
  </div>
  
  <!-- 音频播放器弹框 -->
  <AudioPlayer v-model:visible="showAudioDialog" />
</template>

<script setup lang="ts">
/**
 * TimeDisplay 时间显示组件
 * 
 * 功能描述：
 * 1. 实时显示当前日期和时间（YYYY-MM-DD HH:mm:ss）
 * 2. 每秒自动更新
 * 3. 点击时间区域唤起音频播放器/录音机弹窗
 * 
 * 组件结构：
 * - 左侧显示日期
 * - 中间显示分隔符
 * - 右侧显示时间
 */

import { ref, onMounted, onUnmounted } from 'vue'
import AudioPlayer from '../TimeDisplay/AudioPlayer.vue'

// ==================== 响应式状态 ====================

/** 日期部分字符串 (YYYY-MM-DD) */
const datePart = ref<string>('')
/** 时间部分字符串 (HH:mm:ss) */
const timePart = ref<string>('')
/** 控制音频播放器弹窗的显示状态 */
const showAudioDialog = ref<boolean>(false)
/** 定时器引用，用于组件卸载时清理 */
let timeInterval: NodeJS.Timeout | null = null

// ==================== 事件处理 ====================

/**
 * 处理组件点击事件
 * 功能：打开音频播放器弹窗
 */
const handleClick = () => {
  showAudioDialog.value = true
}

/**
 * 更新当前时间显示
 * 
 * 获取系统当前时间，格式化为指定的字符串格式并更新响应式变量
 */
const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  // 月份需要+1，并补零
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  
  datePart.value = `${year}-${month}-${day}`
  timePart.value = `${hours}:${minutes}:${seconds}`
}

// ==================== 生命周期 ====================

/**
 * 组件挂载后执行
 * 1. 立即更新一次时间，避免显示延迟
 * 2. 启动周期性定时器，每秒更新时间
 */
onMounted(() => {
  // 初始化时间显示
  updateTime()
  // 每秒更新时间
  timeInterval = setInterval(updateTime, 1000)
})

/**
 * 组件卸载时清理资源
 * 清除定时器，防止内存泄漏
 */
onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
    timeInterval = null
  }
})
</script>

<style scoped>
.time-display {
  position: absolute;
  top: 47px;
  left: 86px;
  font-family: Furore;
  font-size: 18px;
  font-weight: normal;
  line-height: normal;
  text-align: center;
  letter-spacing: 0.05em;
  font-variation-settings: "opsz" auto;
  color: #ffffff;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.time-display:hover {
  opacity: 0.8;
}

.date-part {
  display: inline-block;
}

.time-separator {
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: 1px 18px;
  background: #ffffff;
  transform: rotate(30deg);
  opacity: 1;
}

.time-part {
  display: inline-block;
}
</style>

